<template>
  <!-- 设置 -->
  <view class="pages">
    <view class="header">
      <view class="logo" :style="{ 'background-image': info?.logo }">
        <image :src="info?.logo" mode="scaleToFill"
      /></view>
      <view class="app-name">咪婴伴侣</view>
      <view class="app-version">Version {{ version }}</view>
    </view>

    <view class="contents">
      <view class="item" @click="navigateTo('/pages-users/tool-about-us/docs?title=服务条款')">
        <view class="title">服务条款</view>
        <u-icon name="arrow-right" color="#333333" size="16"></u-icon>
      </view>
      <view
        class="item"
        @click="navigateTo('/pages-users/tool-about-us/version-introduction', false)"
      >
        <view class="title">功能介绍</view>
        <u-icon name="arrow-right" color="#333333" size="16"></u-icon>
      </view>
      <view class="item" @click="navigateTo('/pages-users/tool-about-us/docs?title=投诉')">
        <view class="title">投诉</view>
        <u-icon name="arrow-right" color="#333333" size="16"></u-icon>
      </view>
      <view class="item" @click="navigateTo('/pages-users/tool-about-us/docs?title=隐私政策')">
        <view class="title">隐私政策</view>
        <u-icon name="arrow-right" color="#333333" size="16"></u-icon>
      </view>
    </view>
    <view class="footer">
      <view class="text" @click="copyText"> 客服电话：{{ info?.sute_app_service || '' }} </view>
      <view class="text"> {{ info?.sute_app_filing || '' }} </view>
      <view class="text">
        {{ info?.site_app_copyright || '' }}
      </view>
      <view class="text">
        {{ info?.site_app_copy || '' }}
      </view>
    </view>
    <h-authpup
      ref="authpupPhone"
      type="top"
      @changeAuth="callPhone"
      permissionID="CALL_PHONE"
    ></h-authpup>
  </view>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { showToast, navigateTo, navigateBack } from '@/utils'
import { copyRightApi } from '@/services/my/tool-about-us'
const version = ref<string>('')
const info = ref<any>({})
onLoad(() => {
  getSystemInfo()
  copyRight()
})
const authpupPhone = ref(null)
const callPhone = () => {
  uni.makePhoneCall({
    // 手机号
    phoneNumber: info.value?.sute_app_service,
    // 成功回调
    success: (res) => {},
    // 失败回调
    fail: (res) => {},
  })
}
function getSystemInfo() {
  try {
    const res = uni.getSystemInfoSync()
    console.log(res)
    version.value = res.appVersion
  } catch (error) {}
}

async function copyRight() {
  try {
    const res: any = await copyRightApi()
    console.log(res)
    info.value = res.data
  } catch (error) {}
}

const copyText = () => {
  nextTick(() => {
    authpupPhone.value.open()
  })
}
</script>

<style scoped lang="scss">
.pages {
  width: 750rpx;
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 80rpx;

  .header {
    width: 702rpx;
    padding-top: 136rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40rpx;

    .logo {
      width: 164rpx;
      height: 144rpx;
      border-radius: 30rpx 30rpx 30rpx 30rpx;
      opacity: 1;
      background-position: center center;
      background-size: 100% 100%;
      image {
        width: 164rpx;
        height: 144rpx;
      }
    }

    .app-name {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      margin-top: 20rpx;
    }

    .app-version {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      margin-top: 20rpx;
    }
  }

  .contents {
    :last-child {
      border-bottom: none !important;
    }

    .item {
      width: 702rpx;
      height: 95rpx;
      border-bottom: 1rpx solid #e6e6e6;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 32rpx;
        font-weight: 500;
        color: #000000;
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 80rpx;
    width: 702rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .text {
      margin-top: 10rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
    }
  }
}
</style>
